<template>
  <Landscape>
    <div class="preview-atlas">
      <van-empty v-if="srcList.length<=0" />
      <FlipOver ref="imagePreview" v-model="currentIndex" css-landscape :list="srcList" @change="changeHandle" @image-video-click="clickImageHandle" />
      <transition name="transition">
        <div v-show="showMask" class="top" :style="{'padding-left':statusBarHeight+'px'}" @click.stop>
          <svg-icon icon-class="xiangzuo" @click.native="backClickHandle" />
          <span>{{ atlasName }}</span>
        </div>
      </transition>
      <transition name="catalogue">
        <div v-show="showCatalogue" class="catalogue">
          <Catalogue v-model="currentIndex" :list="srcList" @click="aClickHandle" />
        </div>
      </transition>
      <transition name="transition">
        <div v-show="showMask" class="bottom" @click.stop>
          <div class="item-list">
            <div class="item" @click="clickCatalogueHandle">
              <svg-icon icon-class="gongnenggengduo" />
              <span>目录</span>
            </div>
            <div class="item" @click="thumbClickHandle">
              <svg-icon icon-class="caidan-caidanguanli" />
              <span>缩略图</span>
            </div>
            <div class="item" @click="progressClickHandle">
              <svg-icon icon-class="zuoyouqiehuan" />
              <span>进度条</span>
            </div>
          </div>
          <div class="original-image" @click="originalClickHandle">查看原图</div>
        </div>
      </transition>
      <transition name="transition">
        <div v-show="showMask&&showProgress" class="progress">
          <Progress :index.sync="currentIndex" :list="srcList" @click="aClickHandle" />
        </div>
      </transition>
    </div>
  </Landscape>
</template>
<script>
import FlipOver from '@/components/FlipOver'
import Landscape from '@/components/Landscape'
import Progress from './components/Progress'
import Catalogue from './components/Catalogue'
import { getListByAtlasId, saveAtlasBrowsingHistory } from '@/apis/atlas'
import { mapGetters } from 'vuex'
export default {
  name: 'AtlasLastPreview',
  components: {
    FlipOver,
    Landscape,
    Progress,
    Catalogue
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      atlasName: this.$route.query.atlasName,
      currentIndex: 1,
      currentFilpObj: {},
      showMask: false,
      showCatalogue: false,
      showProgress: false,
      srcList: []
    }
  },
  computed: {
    ...mapGetters(['statusBarHeight'])
  },
  watch: {
    startIndex(n) {
      this.$nextTick(() => {
        this.currentIndex = n
      })
    },
    id(val, oldVal) {
      this.getData()
    }
  },
  created() {
    const startIndex = +sessionStorage.getItem('atlas_index')
    if (startIndex !== null) {
      sessionStorage.removeItem('atlas_index')
      this.currentIndex = startIndex + 1
    }
    this.getData()
  },
  activated() {
    const startIndex = +sessionStorage.getItem('atlas_index')
    if (startIndex !== null) {
      sessionStorage.removeItem('atlas_index')
      // this.$refs.imagePreview.toPage(startIndex + 1)
      this.currentIndex = startIndex + 1
    }
  },
  mounted() {
    const startIndex = +sessionStorage.getItem('atlas_index')
    if (startIndex !== null) {
      sessionStorage.removeItem('atlas_index')
      this.currentIndex = startIndex + 1
      // this.$refs.imagePreview.toPage(startIndex + 1)
    }
  },
  methods: {
    changeHandle(obj) {
      this.currentFilpObj = obj
    },
    touchHandle() {
      this.showMask = false
      this.showProgress = false
      this.showCatalogue = false
    },
    // 获取数据
    getData() {
      getListByAtlasId(this.id).then(res => {
        this.srcList = res.data.map(e => {
          e.type = 'image'
          e.src = e.bigUrl
          return e
        })
        if (this.srcList.length === 0) {
          this.showMask = true
        }
      }).catch(() => {
        this.showMask = true
      })
      this.setBrowsingHistory()
    },
    // 保存浏览记录
    setBrowsingHistory() {
      const data = {
        atlasId: this.id,
        atlasName: this.atlasName
      }
      saveAtlasBrowsingHistory(data).then(res => {

      })
    },
    // 返回
    backClickHandle() {
      this.$router.go(-1)
    },
    clickImageHandle(e) {
      // this.doubleTap(() => {
      //   this.showMask = !this.showMask
      //   if (!this.showMask) {
      //     this.showProgress = false
      //     this.showCatalogue = false
      //   }
      // }, this)
      if (e === undefined) {
        this.showMask = !this.showMask
      } else {
        this.showMask = e
      }
      if (!this.showMask) {
        this.showProgress = false
        this.showCatalogue = false
      }
    },
    doubleTap: (() => {
      let flag = false
      return function(fn, ctx, ...args) {
        if (!flag) {
          flag = true
          setTimeout(() => {
            flag = false
          }, 200)
          return
        } else {
          flag = false
          fn.apply(ctx, args)
        }
      }
    })(),
    // 缩略图
    thumbClickHandle() {
      this.$router.replace({ name: 'AtlasLastPreviewThumb', params: { id: this.id }, query: { atlasName: this.$route.query.atlasName }})
    },
    // 进度条
    progressClickHandle() {
      this.showCatalogue = false
      this.showProgress = !this.showProgress
    },
    // 进度条描点
    aClickHandle(item, i) {
      this.$refs.imagePreview.toPage(i)
    },
    // 原图
    originalClickHandle() {
      // const item = this.srcList[this.currentIndex - 1]
      // this.$set(item, 'src', item.url)
      this.$refs.imagePreview.rawImage(this.currentIndex)
    },
    // 显示隐藏目录
    clickCatalogueHandle() {
      this.showCatalogue = !this.showCatalogue
      this.showProgress = false
    }
  }
}
</script>
<style lang="less" scoped>
@topHeight: 40px;
@bottomHeight: 60px;
@catalogueHeight: calc(100% - @topHeight - @bottomHeight);
.preview-atlas{
  position: relative;
  height: 100%;
  & *{
    -webkit-overflow-scrolling: unset !important;
  }
  // .mask{
    // position: absolute;
    // top: 0;
    // left: 0;
    // bottom: 0;
    // right: 0;
    .top{
      position: absolute;
      top: 0;
      height: @topHeight;
      width: 100%;
      background-color: rgba(64, 64, 64, 1);
      display: flex;
      align-items: center;
      padding: 0 15PX;
      z-index: 99999;
      transform: translateZ(1000px);
      &>svg{
        font-size: 24PX;
        color: #fff;
      }
      &>span{
        margin-left: 10PX;
        color: #fff;
        font-size: 16PX;
      }
    }
    .bottom{
      position: absolute;
      bottom: 0;
      height: @bottomHeight;
      width: 100%;
      background-color: rgba(64, 64, 64, 1);
      z-index: 99999;
      transform: translateZ(1000px);
      .item-list{
        display: flex;
        justify-content: center;
        align-items: center;
        height: inherit;
        .item{
          height: inherit;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &>span{
            color: #fff;
            font-size: 14px;
            font-weight: 400;
          }
          &>svg{
            color: #fff;
            font-size: 24px;
          }
        }
        .item + .item{
          margin-left: 16px;
        }
      }
      .original-image{
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 14px;
        font-weight: 400;
      }
    }
    // 目录
    .catalogue{
      position: absolute;
      top: @topHeight;
      height: @catalogueHeight;
      background-color: rgba(0, 0, 0, 0.49);
      padding-left: 30px;
      width: 150px;
      z-index: 99999;
      transform: translateZ(1000px);
    }
    // 进度条
    .progress{
      position: absolute;
      bottom: @bottomHeight;
      background-color: rgba(0, 0, 0, 0.49);
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      z-index: 99999;
      transform: translateZ(1000px);
    }
  // }
  // 过渡
  .transition-enter,.transition-leave-to{
    opacity: 0;
    height: 0 !important;
  }
  .transition-enter-active,.transition-leave-active{
    transition: all .7s;
  }

  // 目录
  .catalogue-enter,.catalogue-leave-to{
    opacity: 0;
    width: 0 !important;
  }
  .catalogue-enter-active,.catalogue-leave-to{
    transition: all .7s;
  }
}
.swipe-atlas{
  width: 100vh;
}
</style>
<style lang="less">
.preview-atlas{
  -webkit-overflow-scrolling: unset !important;
  & *{
    -webkit-overflow-scrolling: unset !important;
  }
  [class*="van-image-preview__image"]{
    width: 100vh;
    height: 100vw;
  }
}
</style>
